<template>
    <div>
        <h3>专题精选</h3>
        <van-swipe :loop="false" :width="300" :show-indicators="false">
            <van-swipe-item v-for="item in topicList" :key="item.id">
                <img :src="item.item_pic_url" alt="">
                <p class="title">{{item.title}}</p>
                <p class="subtitle">{{item.subtitle}}</p>
            </van-swipe-item>
        </van-swipe>
    </div>
</template>

<script>
export default {
    name: "",
    props: ["topicList"],
    data(){
        return{ }
    },
};
</script>
<style lang="less" scoped>
h3{
    text-align: center;
    margin-top: 32px;
    margin-bottom: 16px;
    font-size: 20px;
    color: black
}
.van-swipe-item {
    box-sizing: border-box;
    padding-left: 8px;
    padding-right: 8px;
    margin-right: 16px;
    img{
        width: 300px;
        height: 200px;
    }
    .title{
        width: 270px;
        height: 40px;
        line-height: 40px;
        font-size: 16px;
        color: black;
    }
    .subtitle{
        width: 270px;
        height: 24px;
        line-height: 24px;
        font-size: 16px;
        color: black;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
</style>
